<script lang="ts" setup>
const showDownload = ref(false)
const emit = defineEmits(['close'])

function handleOpen() {
  emit('close')
  if (navigator.userAgent.match(/(iPhone|iPod|iPad);?/i)) {
    showToast('IOS app development in progress')
  } else {
    try {
      window.location.href = 'tv://tv.com:8088/router'
    } catch (error) {
    } finally {
      showDownload.value = true
    }
  }
}
</script>

<template>
  <div class="play-popup">
    <!-- close -->
    <div
      class="close"
      @click="$emit('close')">
      <svg-icon
        name="close"
        class="icon">
      </svg-icon>
    </div>

    <div class="title">Tips</div>
    <div class="content">Experience more exciting features, please open our APP.</div>
    <div
      class="btn"
      @click="handleOpen">
      Watch this in APP
    </div>

    <!-- download-popup -->
    <van-popup
      v-model:show="showDownload"
      teleport="body">
      <LazyDownloadPopup @close="showDownload = false"> </LazyDownloadPopup>
    </van-popup>
  </div>
</template>

<style lang="scss" scoped>
.play-popup {
  position: relative;
  width: 295px;
  min-height: 250px;
  padding: 32px 13px 24px 13px;
  @include bgimg(cover, 'dialog_bg01.png');
  .close {
    position: absolute;
    right: 5px;
    top: 0;
    cursor: pointer;
    .icon {
      font-size: 20px;
    }
  }
  .title {
    font-size: 18px;
    text-align: center;
    margin-bottom: 25px;
    color: #fff;
  }
  .content {
    font-size: 17px;
    line-height: 24px;
    text-align: center;
    margin-bottom: 30px;
    font-weight: normal;
    color: #fff;
  }
  .btn {
    width: 170px;
    height: 40px;
    line-height: 40px;
    margin: 0 auto;
    border-radius: 4px;
    text-align: center;
    color: #fff;
    font-size: 16px;
    background: $primary-color;
    box-shadow: 2px 4px 16px 0px rgba(249, 57, 68, 0.4);
    cursor: pointer;
  }
}
</style>
